<template>
  <a-layout id="components-layout-demo-responsive">
    <a-layout>
        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">

          <table border="1px" width="500px">
            <tr>
              <th>用户名</th>
              <th>手机号</th>
              <th>邮箱</th>
              <th>删除用户</th>
            </tr>
            <tr  v-for="user in user_li" :key="user.id">
              <td>{{user.username}}</td>
              <td>{{user.phone}}</td>
              <td>{{user.email}}</td>
              <td>
                <a-button @click="user_del(user.id)">
                  <a-icon type="user-delete" />
                </a-button>
              </td>
            </tr>
          </table>
        </div>
      <a-layout-footer style="textAlign: center">
        Ant Design ©2018 Created by Ant UED

      </a-layout-footer>
    </a-layout>

  </a-layout>





</template>
<script>

  export default {
    data(){
      return{
        user_li:'',

      }
    },
    methods: {
      
      user_get(){
        this.$axios.get('http://127.0.0.1:8000/user/')
        .then(res=>{
          console.log(res.data)
          this.user_li = res.data
        })
      },
      user_del(uid){
        this.$axios.delete('http://127.0.0.1:8000/user/?uid='+uid, )
          .then(res=>{
            console.log(res.data)
          })
        location.reload()
        },
    },
    created() {
      this.user_get()
    }
  }
</script>
<style>
</style>
